<template>
    <div>
        <Title :title="title"></Title>
        <div ref="bottom4" style="height: 150px;margin-top: 20px;"></div>
    </div>
</template>

<script>
import { Pie } from '@antv/g2plot';

export default {
    data() {
        return {
            title: '工程设备使用量',

        }
    },
    methods: {
        loadPie() {
            const data = [
                { type: '山西农大\n主体育场工程\n', value: 1 },
                { type: '太原理工大学\n一号教学楼工程', value: 2 },
                { type: '中北大学', value: 0 },
                { type: '兰州理工大学', value: 2 },

            ];

            const piePlot = new Pie(this.$refs.bottom4, {
                appendPadding: 10,
                data,
                angleField: 'value',
                colorField: 'type',
                radius: 1,
                innerRadius: 0.6,
                label: {
                    type: 'inner',
                    offset: '-50%',
                    content: '{value}',
                    style: {
                        textAlign: 'center',
                        fontSize: 14,
                    },
                },
                legend: {
                    position: 'right', // 图例位置（可选：top, right, bottom, left）
                    itemName: {
                        style: {
                            fill: 'white'
                        }
                    }
                },
                interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
                statistic: {
                    title: false,
                    content: {
                        style: {
                            fontSize:12,
                            color:'white',
                            whiteSpace: 'pre-wrap',
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                        },
                        content: '设备使用量',
                    },
                },
            });

            piePlot.render();

        }
    },
    mounted() {
        this.loadPie();
    }
}
</script>

<style lang="less" scoped></style>